<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>全民快送</title>

    <!-- Bootstrap -->
    <link href="${base}/${resources}/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<#include "header.html"/>
<div class="container-fluid">
    <form id="feedbackForm" class="form-horizontal" role="form">
        <div class="form-group">
            <label for="phone" class="col-xs-3 col-sm-2 control-label">联系电话</label>

            <div class="col-xs-8 col-sm-9">
                <input type="tel" class="form-control" name="phone" id="phone"/>
                <input type="hidden" class="form-control" name="uid" id="uid" value='${uid!"1"}'/>
                <input type="hidden" class="form-control" name="wid" id="wid" value='${wid!"1"}'/>
            </div>
        </div>
        <div class="form-group">
            <label for="email" class="col-xs-3 col-sm-2 control-label">联系邮箱</label>

            <div class="col-xs-8 col-sm-9">
                <input type="email" class="form-control" name="email" id="email"/>
            </div>
        </div>
        <div class="form-group">
            <label for="title" class="col-xs-3 col-sm-2 control-label">反馈标题</label>

            <div class="col-xs-8 col-sm-9">
                <input type="text" class="form-control" name="title" id="title"/>
            </div>
        </div>
        <div class="form-group">
            <label for="message" class="col-xs-3 col-sm-2 control-label">反馈内容</label>

            <div class="col-xs-8 col-sm-9">
                <textarea rows="3" class="form-control" name="message" id="message"></textarea>
            </div>
        </div>

        <div class="form-group">
            <div class="col-xs-offset-3 col-sm-offset-2 col-xs-4 col-sm-2">
                <button id="submitFeedback" type="button" class="btn btn-info">提交反馈</button>
            </div>
        </div>
    </form>

</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="${base}/${resources}/js/jquery-2.0.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="${base}/${resources}/js/bootstrap.min.js"></script>
<script src="${base}/${resources}/js/jquery.validate.min.js"></script>
<script src="${base}/${resources}/js/jquery.json-2.4.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        $("#navTitle").text("我要反馈");
        //校验
        $("#feedbackForm").validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: true,
            rules: {
                phone: {
                    required: false,
                    maxlength:50
                },
                email: {
                    required: true,
                    email:true,
                    maxlength: 100
                },
                title: {
                    required: true,
                    maxlength:127
                },
                message: {
                    required: true,
                    maxlength: 500
                }
            },

            messages: {
                phone: {
                    required: "请输入联系电话",
                    maxlength:"请输入合法的联系电话"
                },
                email: {
                    required: "请输入邮箱地址",
                    email:"请输入正确的邮箱地址",
                    maxlength: "联系邮箱不能超过100个字符"
                },
                title: {
                    required: "请输入反馈标题",
                    maxlength:"反馈标题不能超过100个字符"
                },
                message: {
                    required: "请输入反馈内容",
                    maxlength: "反馈内容不能超过500个字符"
                }
            },

            highlight: function (e) {
                $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
            },

            success: function (e) {
                $(e).closest('.form-group').removeClass('has-error').addClass('has-info');
                $(e).remove();
            },

            submitHandler: function (form) {

            },
            invalidHandler: function (form) {

            }
        });
        $("#submitFeedback").click(function(){

            var form = $('#feedbackForm');
            form.validate();
            if (form.valid()) {

                $.ajax({
                    type:"POST",
                    contentType:"application/json;charset=utf-8",
                    url:"${base}/feedback/submit",
                    data: $.toJSON( {"uid":$("#uid").val(),"wid":$("#wid").val(),
                        "phone":$("#phone").val(),"email":$("#email").val(),
                        "title":$("#title").val(),"message":$("#message").val()}),
                    success:
                            function(data){

                                if(data.resultCode == 0){
                                    alert("感谢您的反馈，我们会尽快处理！");
                                    window.location.reload();
                                }else{
                                    alert("反馈提交失败!");
                                }

                            },
                    dataType:"json"});
            }
        });


    });

</script>
</body>
</html>